<template>
  <el-container class="layout">
    <el-header
      height="48px"
      class="header"
      :style="{ background: sideBackGorund }"
    >
      <div class="header-left">
        <router-link :to="{ name: 'home' }">
          <img src="@/assets/logo.png" alt="logo" />
          <h1 :style="{ color: sideColor }">{{ title }}</h1>
        </router-link>
      </div>
      <div
        class="scrollbar-btn"
        @mouseover="menuScrollbarClick('left')"
        @mouseout="menuScrollbarClick()"
        v-if="showMenuScrollBtn"
      >
        <el-icon :size="25" :color="sideColor">
          <d-arrow-left />
        </el-icon>
      </div>
      <div class="header-content">
        <el-scrollbar ref="menuScrollbar" @scroll="menuScroll">
          <my-menu mode="horizontal"></my-menu>
        </el-scrollbar>
      </div>
      <div
        class="scrollbar-btn"
        @mouseover="menuScrollbarClick('right')"
        @mouseout="menuScrollbarClick()"
        v-if="showMenuScrollBtn"
      >
        <el-icon :size="25" :color="sideColor">
          <d-arrow-right />
        </el-icon>
      </div>
      <div class="header-right">
        <el-dropdown
          @command="rightMenuClick"
          :style="{ color: sideColor, background: sideBackGorund }"
        >
          <span>
            <el-icon>
              <Avatar />
            </el-icon>
            {{ username }}
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">
                <el-icon>
                  <Edit />
                </el-icon>
                修改密码
              </el-dropdown-item>
              <el-dropdown-item command="Setting">
                <el-icon>
                  <setting />
                </el-icon>
                系统设置
              </el-dropdown-item>
              <el-dropdown-item command="Logout" divided>
                <el-icon>
                  <sold-out />
                </el-icon>

                退出
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-main class="main">
      <my-main></my-main>
    </el-main>
  </el-container>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import MyMenu from './components/MyMenu'
  import MyMain from './components/MyMain'
  import {
    Avatar,
    Edit,
    Setting,
    SoldOut,
    DArrowLeft,
    DArrowRight,
  } from '@element-plus/icons'
  export default {
    name: 'TopMenuLayout', // 头部菜单布局
    components: {
      MyMenu,
      MyMain,
      Avatar,
      Edit,
      Setting,
      SoldOut,
      DArrowLeft,
      DArrowRight,
    },
    props: {},
    data() {
      return {
        title: process.env.VUE_APP_TITLE,
        showMenuScrollBtn: false, // 显示菜单滚动条按钮
        menuScrollLeft: 0, // 菜单滚动条位置
        menuScrollDirection: '', // 移动类型
        menuScrollTimer: null, // 移动定时器
      }
    },
    // 计算属性
    computed: {
      ...mapGetters({
        themeStyle: 'user/themeStyle',
        username: 'user/username',
      }),
      // 侧边背景颜色
      sideBackGorund() {
        return this.themeStyle == '1' ? '#fff' : '#000'
      },
      sideColor() {
        return this.themeStyle == '1' ? '#000' : '#fff'
      },
    },
    mounted() {
      this.resetHeaderContentWidth()
    },
    // 方法
    methods: {
      ...mapActions({
        logout: 'user/logout',
      }),
      // 重置头部宽度
      resetHeaderContentWidth() {
        if (this.$refs.headerContent) {
          this.showMenuScrollBtn = this.$refs.headerContent.offsetWidth < 706
          window.onresize = () => {
            if (this.$refs.headerContent)
              this.showMenuScrollBtn =
                this.$refs.headerContent.offsetWidth < 706
          }
        }
      },
      // 滚动条监听事件
      menuScroll({ scrollLeft }) {
        this.menuScrollLeft = scrollLeft
      },
      // 滚动条按钮点击事件
      menuScrollbarClick(direction) {
        this.menuScrollDirection = direction
        if (direction) {
          if (!this.menuScrollTimer) {
            this.menuScrollTimer = setInterval(this.menuScrollbarMove, 10)
          }
        } else {
          clearInterval(this.menuScrollTimer)
          this.menuScrollTimer = null
        }
      },
      // 滚动条移动
      menuScrollbarMove() {
        const direction = this.menuScrollDirection
        console.log(this.menuScrollLeft)
        let menuScrollLeft = this.menuScrollLeft
        if (direction == 'left') {
          menuScrollLeft -= 5
        } else if (direction == 'right') {
          menuScrollLeft += 5
        }
        if (menuScrollLeft < 0) menuScrollLeft = 0
        this.$refs.menuScrollbar.setScrollLeft(menuScrollLeft)
      },
      // 右侧菜单点击事件
      rightMenuClick(command) {
        switch (command) {
          case 'Setting':
            // 显示系统设置抽屉
            this.$emit('showSettingDrawer')
            break
          case 'Logout':
            // 登出
            this.logout()
            break
          default:
            break
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  $header-height: 48px;
  .layout {
    height: 100%;
    .header {
      height: $header-height;
      line-height: $header-height;
      padding: 0 10px;
      box-shadow: 0 2px 8px 0 rgba(29, 35, 41, 0.05);
      display: flex;
      justify-content: center;
      align-items: center;
      .header-left {
        width: 250px;
        padding: 10px 16px;
        align-items: center;
        cursor: pointer;
        a {
          text-decoration: none;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 32px;
          img {
            display: inline-block;
            height: 20px;
            vertical-align: middle;
          }
          h1 {
            margin: 0 0 0 12px;
            overflow: hidden;
            font-weight: 600;
            font-size: 18px;
          }
        }
      }
      .header-content {
        flex: 1 1 0%;
        overflow-x: auto;
        overflow-y: hidden;
      }
      .header-right {
        min-width: 120px;
        text-align: center;
      }
      .scrollbar-btn {
        width: 40px;
        text-align: center;
        cursor: pointer;
        .el-icon {
          vertical-align: middle;
        }
        &:hover {
          .el-icon {
            color: #1890ff;
          }
        }
      }
    }
    .main {
      box-shadow: 0 2px 8px 0 rgba(29, 35, 41, 0.05);
      padding: 0;
    }
  }
</style>
